<template>
  <el-card>
    <div class="clearfix">
      <el-tabs class="tab" v-model="tab">
        <el-tab-pane label="销售量" name="sale"></el-tab-pane>
        <el-tab-pane label="访问量" name="visit"></el-tab-pane>
      </el-tabs>
      <div class="right">
        <span>本日</span>
        <span>本周</span>
        <span>本月</span>
        <span>本年</span>
        <el-date-picker
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
        ></el-date-picker>
      </div>
    </div>
    <div class="container">
      <el-row :gutter="10">
        <el-col :span="18">
          <barChart :tab="tab" />
        </el-col>
        <el-col :span="6" class="list">
          <ul>
            <li>
              <span class="title">门店{{saleOrCount}}量排名</span>
            </li>
            <li>
              <span class="first cri">1</span>
              <span>肯德基</span>
              <span class="vright">211,555</span>
            </li>
            <li>
              <span class="first cri">2</span>
              <span>麦当劳</span>
              <span class="vright">111,555</span>
            </li>
            <li>
              <span class="first cri">3</span>
              <span>茶颜悦色</span>
              <span class="vright">101,555</span>
            </li>
            <li>
              <span class="first">4</span>
              <span>一点点</span>
              <span class="vright">21,555</span>
            </li>
            <li>
              <span class="first">5</span>
              <span>麻辣香锅</span>
              <span class="vright">11,555</span>
            </li>
            <li>
              <span class="first">6</span>
              <span>屈臣氏</span>
              <span class="vright">1,555</span>
            </li>
            <li>
              <span class="first">7</span>
              <span>华莱士</span>
              <span class="vright">555</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import barChart from "./barChart";
export default {
  name: "Sale",
  data() {
    return {
      tab: "sale"
    };
  },
  components: {
    barChart
  },
  computed: {
    saleOrCount() {
      return this.tab == "sale" ? "销售" : "访问";
    }
  }
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 10px;
}
.clearfix {
  position: relative;
  display: flex;
  flex-direction: row;
}
.tab {
  width: 100%;
}
.right {
  position: absolute;
  right: 0;
}
.right span {
  margin: 0 10px;
}
.list {
  ul {
    li {
      list-style: none;
      padding: 15px;
    }
    .first {
      display: inline-block;
      width: 18px;
      height: 18px;
      text-align: center;
    }
    .cri {
      color: #fff;
      background-color: black;
      border-radius: 50%;
    }
    span {
      margin-right: 20px;
    }
    .vright {
      float: right;
    }
    .title {
      font-size: 14px;
      margin-bottom: 20px;
    }
  }
}
</style>